<template>
    <div>
        <ClientOnly>
            <div class="flex items-center justify-center h-screen overflow-hidden bg-#F8F8F8 min-h-600px">
                <div class="w-900px h-520px bg-white bg-cover rounded-md shadow-lg">
                    <div class=" h-120px p-8">
                        <div class="ml-[-50px] h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                            style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
                            @click="router.back()">
                            <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                                <span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
                            </div>
                        </div>
                        <div flex="~ items-center justify-between">
                            <b class="text-2rem  text-#AC8358 inline-block">我要投稿</b>
                            <b class="text-1.2rem float-right inline-block">投稿至zxcv.b@gmail.com</b>
                        </div>
                    </div>
                    <div class="grid grid-cols-[120px_1fr] items-center gap-y-[20px] gap-x-[1px] py-5 px-18">
                        <span class="text-left">标题<b class="text-red-500 p-l-10px">*</b></span>
                        <input placeholder="请输入稿件标题"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                            v-model="data.title" />
                        <span class="text-left">姓名<b class="text-red-500 p-l-10px">*</b></span>
                        <input placeholder="请输入姓名"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                            v-model="data.name" />
                        <span class="text-left">手机号<b class="text-red-500 p-l-10px">*</b></span>
                        <input placeholder="请输入手机号"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                            v-model="data.phone" />
                        <span class="text-left">邮箱</span>
                        <input placeholder="请输入邮箱"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px   "
                            v-model="data.email" />
                        <span>附件</span>
                        <el-upload ref="upload" class="upload-demo" :action="uploadUrl" :limit="1"
                            :headers="{ 'Bx_auth_ticket': useUserStore().bxAuthTicket }" :data="{
                                'serviceName': 'srv_bxfile_service',
                                'interfaceName': 'add',
                                'app_no': useRuntimeConfig().public.baseApp,
                                'table_name': 'bxdfz_collect',
                                'columns': 'fujian',    
                            }" :before-upload="beforeUpload" :on-success="handleSuccess" :on-exceed="handleExceed"
                            :auto-upload="false">
                            <template #trigger>
                                <el-button type="warning">选择附件</el-button>
                            </template>
                            <template #tip>
                                <div class="el-upload__tip text-red">
                                    文件大小限制2m
                                </div>
                            </template>
                        </el-upload>
                    </div>
                    <button class="btn mx-40% w-20%" @click="submitUpload">提交</button>
                </div>

            </div>

        </ClientOnly>
    </div>

</template>

<script lang="ts" setup>
import { genFileId } from 'element-plus'
import {EmailUpload} from '~/api/home'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
const store = useUserStore()
const userInfo = computed(() => store.userInfo)
const router = useRouter()
const uploadUrl = computed(() => `${useRuntimeConfig().public.baseApi}/file/upload`)
const data = ref<{
    email: string,
    name: string,
    phone: string,
    fileNo: number,
    title:string
}>({
    email: userInfo.value?.email || '',
    name: userInfo.value?.real_name || '',
    phone: userInfo.value?.mobile || '',
    fileNo: 0,
    title:''
})
const upload = ref<UploadInstance>()


const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

function handleSuccess(res: any, file: UploadFile, fileList: UploadFile[]) {
    if(res?.file_no){
        
        data.value.fileNo = res.file_no
        EmailUpload(data.value).then(res=>{
            if(res.state=="SUCCESS"){
                ElMessage.success('上传成功')
            }
        })

    }else{
        ElMessage.error('上传失败')
    }
    
}
function beforeUpload(file: UploadRawFile) {
    let size2M = file.size / 1024 / 1024 < 2;
    if (!size2M) {
        ElMessage.warning('上传文件大小不能超过 2MB!');
        return false;
    }
}
const submitUpload = () => {
    upload.value!.submit()
}




</script>

<style lang="scss" scoped>
.btn-on {
    border-bottom: 4px solid #ac8458;
}

.jizhu {
    &:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
        color: #55637dd9
    }
}
</style>